import {useState,useEffect} from 'react'
import {useNavigate, useSearchParams} from 'react-router-dom'
import {DetailDataType,fetDetailAPI} from '@/apis/detail'
import { NavBar } from 'antd-mobile'
function index() {
    const [params] = useSearchParams()
    const id = params.get('id')
    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }
    const [detail,setDetail] = useState<DetailDataType | null>(null)
    useEffect(()=>{
        fetDetailAPI(id!).then(res=>{
            console.log(res);
            setDetail(res.data.data) 
        })
    },[id])
    if(!detail){
        return <div>this is loading...</div>
    }
    return (
        <div>
            <NavBar onBack={back}>{detail?.title}</NavBar>
            <div dangerouslySetInnerHTML={{
                __html:detail?.content
            }}>
            </div>
        </div>
    );
}

export default index;